@import '~@/assets/css/variable'

.chatroom
  position: absolute
  top: 50%
  left: 50%
  transform: translate(-50%, -50%)
  width: 712px
  height: 512px
  background: $box-color
  border: 1px solid $border-color

.container
  display: flex
  justify-content: space-between
  margin: 0 auto
  margin-top: 6px
  width: 700px
  height: 502px

.talk-panel
  width: 470px
  height: 500px
  background: $container-color
  border: 1px solid $border-color
  span
    display: block
    width: 100%
    height: 40px
    background: $title-color
    border-bottom: 1px solid $border-color
    font-size: 14px
    line-height: 40px
    text-indent: 9px
    color: $order-blue
  .talk-place
    width: clac(100% - 10px)
    height: 420px
    padding-left: 10px
    overflow-y: scroll
    .talk_entry
      width: 100%
      font-size: 14px
      margin-top: 12px
      word-break: break-all
      line-height: 25px
      .talk_item
        display: inline
        background: transparent
        border: none
        line-height: 0
  .speak
    width: 100%
    height: 39px
    input
      background: none
      outline: 0
      border: none
    & input[name='you']
      position: relative
      top: 10px
      left: 5px
      width: 382px
      height: 24px
      padding-left: 5px
      background: rgba(255, 255, 255, 0.2)
      border: 1px solid $border-color
      transition: all 0.2s
      &:hover, &:focus
        background: rgba(255, 255, 255, 0.6)
        border-radius: 5px
    & input[type='submit']
      position: relative
      top: 9px
      left: 15px
      width: 48px
      height: 22px
      background: rgba(255, 255, 255, 0.2)
      border: 1px solid $border-color
      border-radius: 5px
      font-size: 12px
      transition: all 0.2s

.profile
  width: 220px
  height: 502px
  .avatar
    width: 218px
    height: 250px
    border: 1px solid $border-color
    background-image: url('./img/marisa.jpg')
    background-size: 333px
    background-repeat: no-repeat
    background-position: 58% 2%
    margin-bottom: 8px
  .cmd
    width: 202px
    height: 232px
    padding: 4px 8px
    background: $container-color
    border: 1px solid $border-color
    color: $order-blue
    font-size: 12px
    .system-cmd
      display: block
      width: 100%
      margin-bottom: 13px
      margin-top: 13px
    .cmd-collect
      text-indent: 1em
    .marisa-cmd
      display: inline
      font-weight: bold
    .cmd_desc
      position: relative
      top: -2px
      line-height: 15px
      .cmd_desc_content
        margin-top: 10px
        line-height: 15px

.you_color
  // color: #836FFF !important
  color: #4876FF !important
